/* 全局按钮样式统一 */
:root {
  --primary-color: #667eea;
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --success-color: #48bb78;
  --success-gradient: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  --warning-color: #ed8936;
  --warning-gradient: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
  --secondary-color: #a0aec0;
  --secondary-gradient: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
  --danger-color: #f56565;
  --danger-gradient: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
}

/* 统一按钮基础样式 */
.btn-primary,
.btn-success,
.btn-warning,
.btn-secondary,
.btn-danger {
  border: none !important;
  color: white !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary {
  background: var(--primary-gradient) !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

.btn-success {
  background: var(--success-gradient) !important;
  box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3) !important;
}

.btn-warning {
  background: var(--warning-gradient) !important;
  box-shadow: 0 2px 8px rgba(237, 137, 54, 0.3) !important;
}

.btn-secondary {
  background: var(--secondary-gradient) !important;
  box-shadow: 0 2px 8px rgba(160, 174, 192, 0.3) !important;
}

.btn-danger {
  background: var(--danger-gradient) !important;
  box-shadow: 0 2px 8px rgba(245, 101, 101, 0.3) !important;
}

/* 按钮悬停效果 */
.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-secondary:hover,
.btn-danger:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.btn-primary:hover {
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4) !important;
}

.btn-success:hover {
  box-shadow: 0 4px 16px rgba(72, 187, 120, 0.4) !important;
}

.btn-warning:hover {
  box-shadow: 0 4px 16px rgba(237, 137, 54, 0.4) !important;
}

.btn-secondary:hover {
  box-shadow: 0 4px 16px rgba(160, 174, 192, 0.4) !important;
}

.btn-danger:hover {
  box-shadow: 0 4px 16px rgba(245, 101, 101, 0.4) !important;
}

/* 按钮点击效果 */
.btn-primary:active,
.btn-success:active,
.btn-warning:active,
.btn-secondary:active,
.btn-danger:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* 按钮禁用状态 */
.btn-primary:disabled,
.btn-success:disabled,
.btn-warning:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* 按钮图标样式 */
.btn-primary i,
.btn-success i,
.btn-warning i,
.btn-secondary i,
.btn-danger i {
  margin-right: 6px;
  font-size: 14px;
}

/* 小尺寸按钮 */
.btn-primary.el-button--small,
.btn-success.el-button--small,
.btn-warning.el-button--small,
.btn-secondary.el-button--small,
.btn-danger.el-button--small {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

/* 大尺寸按钮 */
.btn-primary.el-button--large,
.btn-success.el-button--large,
.btn-warning.el-button--large,
.btn-secondary.el-button--large,
.btn-danger.el-button--large {
  padding: 12px 24px !important;
  font-size: 16px !important;
}

/* 按钮组样式 */
.el-button-group .btn-primary,
.el-button-group .btn-success,
.el-button-group .btn-warning,
.el-button-group .btn-secondary,
.el-button-group .btn-danger {
  border-radius: 0 !important;
}

.el-button-group .btn-primary:first-child,
.el-button-group .btn-success:first-child,
.el-button-group .btn-warning:first-child,
.el-button-group .btn-secondary:first-child,
.el-button-group .btn-danger:first-child {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

.el-button-group .btn-primary:last-child,
.el-button-group .btn-success:last-child,
.el-button-group .btn-warning:last-child,
.el-button-group .btn-secondary:last-child,
.el-button-group .btn-danger:last-child {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* 响应式按钮 */
@media (max-width: 768px) {
  .btn-primary,
  .btn-success,
  .btn-warning,
  .btn-secondary,
  .btn-danger {
    padding: 8px 16px !important;
    font-size: 14px !important;
  }
  
  .btn-primary i,
  .btn-success i,
  .btn-warning i,
  .btn-secondary i,
  .btn-danger i {
    margin-right: 4px;
    font-size: 12px;
  }
}

